<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>视频播放列表</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content=""/>
    <meta name="keywords" content=""/>
    <link rel="icon" href="images/Favicon.png">
    <link rel="stylesheet" type="text/css" href="css/animate.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/fontello.css">
    <link rel="stylesheet" type="text/css" href="css/fontello-codes.css">
    <link rel="stylesheet" type="text/css" href="css/jquery.mCustomScrollbar.min.css">
    <link rel="stylesheet" type="text/css" href="css/thumbs-embedded.css">
    <link rel="stylesheet" type="text/css" href="css/video-js.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/responsive.css">
    <link rel="stylesheet" type="text/css" href="css/color.css">
    <link rel="stylesheet" type="text/css" href="css/main-css.css">

</head>
<style>
    html,
    body {
        width: 100%;
        height: 100%;
        /*background-color: #292929;*/
    }

    * {
        padding: 0;
        margin: 0;
    }

    #videoContainer {
        width: 800px;
        height: 585px;
        padding-bottom: 10px;
    }
</style>
<body>

<div class="wrapper hp_1" id="app">

    <div>
        <my-header></my-header>
    </div>


    <section class="mn-sec full_wdth_single_video">
        <div class="container">
            <div class="row gap_remove">
                <div class="col-lg-9">
                    <div class="vid-pr">
                        <div id="videoContainer"></div>
                    </div>
                    <!--vid-pr end-->
                </div>
                <div class="col-lg-3">
                    <div class="playlist_view">
                        <div class="playlist_hd">
                            <h3>视频选集 - <span>2 / 76</span></h3>
                            <ul>
                                <li>
                                    <a href="#" title="">
                                        <i class="icon-add_to_playlist"></i>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" title="">
                                        <i class="icon-like"></i>
                                    </a>
                                </li>
                            </ul>
                            <div class="clearfix"></div>
                        </div>
                        <!--playlist_hd end-->
                        <div class="clearfix"></div>
                        <ul class="videos_lizt mCustomScrollbar" data-mcs-theme="dark">
                            <li>
                                <div class="vidz_row">
                                    <span class="vid_num">1</span>
                                    <div class="vidz_img">
                                        <a href="#" title="">
                                            <img src="images/resources/th6.jpg" alt="">
                                        </a>
                                        <span class="vid-time">13:49</span>
                                        <span class="watch_later">
												<i class="icon-watch_later_fill"></i>
											</span>
                                    </div>
                                    <!--vidz_img end-->
                                    <div class="video_info">
                                        <h3><a href="#" title="">DR DISRESPECT - Before They Were..</a></h3>
                                        <h4><a href="#" title="">Eros Now</a></h4>
                                    </div>
                                </div>
                                <!--vidz_row end-->
                            </li>
                        </ul>
                        <!--videos_lizt end-->
                    </div>
                    <!--playlist_view end-->
                </div>
            </div>
            <div class="row">
                <div class="col-lg-9">
                    <div class="mn-vid-sc single_video">
                        <div class="vid-1">
                            <div class="vid-info">
                                <h3>Kingdom Come: Deliverance Funny Moments and Fails Compilation</h3>
                                <div class="info-pr">
                                    <span>60,723,169 views</span>
                                    <ul class="pr_links">
                                        <li>
                                            <button data-toggle="tooltip" data-placement="top" title="I like this">
                                                <i class="icon-thumbs_up_fill"></i>
                                            </button>
                                            <span>388K</span>
                                        </li>
                                        <li>
                                            <button data-toggle="tooltip" data-placement="top"
                                                    title="I dislike this">
                                                <i class="icon-thumbs_down_fill"></i>
                                            </button>
                                            <span>28K</span>
                                        </li>
                                    </ul>
                                    <div class="clearfix"></div>
                                </div>
                                <!--info-pr end-->
                            </div>
                            <!--vid-info end-->
                        </div>
                        <!--vid-1 end-->
                        <div class="abt-mk">
                            <div class="info-pr-sec">
                                <div class="vcp_inf cr">
                                    <div class="vc_hd">
                                        <img src="images/resources/th5.png" alt="">
                                    </div>
                                    <div class="vc_info pr">
                                        <h4><a href="#" title="">ScereBro</a></h4>
                                        <span>Published on Oct 22, 2017</span>
                                    </div>
                                </div>
                                <!--vcp_inf end-->
                                <ul class="chan_cantrz">
                                    <li>
                                        <a href="#" title="" class="donate">Donate</a>
                                    </li>
                                    <li>
                                        <a class="subscribe">添加订阅 <strong></strong></a>
                                    </li>
                                </ul>
                                <!--chan_cantrz end-->
                                <ul class="df-list">
                                    <li>
                                        <button data-toggle="tooltip" data-placement="top" title="Add to playlist">
                                            <i class="icon-add_to_playlist"></i>
                                        </button>
                                    </li>
                                    <li>
                                        <button data-toggle="tooltip" data-placement="top" title="Favorite">
                                            <i class="icon-like"></i>
                                        </button>
                                    </li>
                                    <li>
                                        <button data-toggle="tooltip" data-placement="top" title="Watch Later">
                                            <i class="icon-watch_later"></i>
                                        </button>
                                    </li>
                                    <li>
                                        <button data-toggle="tooltip" data-placement="top" title="Share">
                                            <i class="icon-share"></i>
                                        </button>
                                    </li>
                                    <li>
                                        <button data-toggle="tooltip" data-placement="top" title="Report Video">
                                            <i class="icon-flag"></i>
                                        </button>
                                    </li>
                                </ul>
                                <!--df-list end-->
                                <div class="clearfix"></div>
                            </div>
                            <div class="clearfix"></div>
                            <div class="about-ch-sec">
                                <div class="abt-rw">
                                    <h4>Cast:</h4>
                                    <ul>
                                        <li><span>Nathan Drake</span></li>
                                        <li><span>Victor Sullivan </span></li>
                                        <li><span>Sam Drake </span></li>
                                        <li><span>Elena Fisher</span></li>
                                    </ul>
                                </div>
                                <div class="abt-rw">
                                    <h4>Category : </h4>
                                    <ul>
                                        <li><span>Gaming</span></li>
                                        <li><span>PS4 Exclusive </span></li>
                                        <li><span>Gameplay </span></li>
                                        <li><span>1080p</span></li>
                                    </ul>
                                </div>
                                <div class="abt-rw">
                                    <h4>About : </h4>
                                    <p> Three years after the events of Uncharted 3: Drake's Deception, Nathan
                                        Drake, now retired as a fortune hunter, has settled into a normal life with
                                        his wife Elena Fisher. His world is then turned upside down when his older
                                        brother Sam, long believed to be dead, suddenly reappears seeking Drake's
                                        help. </p>
                                </div>
                                <div class="abt-rw tgs">
                                    <h4>Tags : </h4>
                                    <ul>
                                        <li><a href="#" title="">#Kingdom</a></li>
                                        <li><a href="#" title="">#ImStillHereBecause </a></li>
                                        <li><a href="#" title="">#denim</a></li>
                                        <li><a href="#" title="">#tshirt</a></li>
                                    </ul>
                                </div>
                            </div>
                            <!--about-ch-sec end-->
                        </div>
                        <!--abt-mk end-->
                        <div class="amazon">
                            <div class="abt-amz">
                                <div class="amz-hd">
                                    <h2>Products used in this video </h2>
                                    <h3>Use CODE:<span> ScereBro26</span> 10% Discount</h3>
                                </div>
                                <!--amz-hd end-->
                                <div class="amz-lg">
                                    <img src="images/resources/cp-logo.png" alt="">
                                </div>
                                <!--amz-lg end-->
                                <div class="clearfix"></div>
                            </div>
                            <!--abt-amz end-->
                            <div class="amz-img-inf">
                                <div class="row">
                                    <div class="col-lg-3 col-md-3 col-sm-6 col-6 full_wdth">
                                        <div class="mg-inf">
                                            <div class="img-sr">
                                                <a href="#" title="">
                                                    <img src="images/resources/pro1.png" alt="">
                                                </a>
                                            </div>
                                            <div class="info-sr">
                                                <h3><a href="#" title="">HEMOON Men’s casual sportswear..</a></h3>
                                                <span>$32.99</span>
                                            </div>
                                        </div>
                                        <!--mg-inf end-->
                                    </div>
                                    <div class="col-lg-3 col-md-3 col-sm-6 col-6 full_wdth">
                                        <div class="mg-inf">
                                            <div class="img-sr">
                                                <a href="#" title="">
                                                    <img src="images/resources/pro2.png" alt="">
                                                </a>
                                            </div>
                                            <div class="info-sr">
                                                <h3><a href="#" title=""> Men's Insulated Front-Zip Jacket </a></h3>
                                                <span class="pr-d">$34.90</span>
                                            </div>
                                        </div>
                                        <!--mg-inf end-->
                                    </div>
                                    <div class="col-lg-3 col-md-3 col-sm-6 col-6 full_wdth">
                                        <div class="mg-inf">
                                            <div class="img-sr">
                                                <a href="#" title="">
                                                    <img src="images/resources/pro3.png" alt="">
                                                </a>
                                            </div>
                                            <div class="info-sr">
                                                <h3><a href="#" title="">Dickies Men's Sanded Duck Jacket </a></h3>
                                                <span class="pr-d">$17.49</span>
                                            </div>
                                        </div>
                                        <!--mg-inf end-->
                                    </div>
                                    <div class="col-lg-3 col-md-3 col-sm-6 col-6 full_wdth">
                                        <div class="mg-inf">
                                            <div class="img-sr">
                                                <a href="#" title="">
                                                    <img src="images/resources/pro4.png" alt="">
                                                </a>
                                            </div>
                                            <div class="info-sr">
                                                <h3><a href="#" title="">Men's Big-Tall Lined Eisenhower Jacket
                                                </a></h3>
                                                <span class="pr-d">$39.00</span>
                                            </div>
                                        </div>
                                        <!--mg-inf end-->
                                    </div>
                                </div>
                            </div>
                            <!--amz-img-in-->
                        </div>
                        <!--amazon end-->
                        <div class="cmt-bx">
                            <ul class="cmt-pr">
                                <li><span>18,386</span> Comments</li>
                                <li>
                                    <span><i class="icon-sort_by"></i><a href="#" title="">Sort By</a></span>
                                </li>
                            </ul>
                            <div class="clearfix"></div>
                            <div class="clearfix"></div>
                            <div class="vcp_inf pc">
                                <div class="vc_hd">
                                    <img src="" alt="">
                                </div>
                                <form>
                                    <input type="text" placeholder="Add a public comment" v-model="comment.text">
                                    <button type="submit" @click="addComment()">Comment</button>
                                </form>
                                <div class="clearfix"></div>
                                <div class="rt-cmt">
                                    <a href="#" title="">
                                        <i class="icon-cancel"></i>
                                    </a>
                                    <div class="clearfix"></div>
                                </div>
                                <!--vcp_inf end-->
                            </div>
                            <!--cmt-bx end-->
                            <ul class="cmn-lst">
                                <li>
                                    <div class="vcp_inf">
                                        <div class="vc_hd">
                                            <img src="images/resources/th2.png" alt="">
                                        </div>
                                        <div class="coments">
                                            <div class="pinned-comment">
                                                <span><i class="icon-pinned"></i>Pinned by ScereBro</span>
                                            </div>
                                            <h2>ScereBro
                                                <small class="posted_dt"> . 18 hours ago</small>
                                            </h2>
                                            <p>Where does Thor: Ragnarok rank amongst the other Thor movies? Amongst
                                                the rest of the MCU? Let us know in the comments below and tell us
                                                which other movies you'd like to see us make Honest.</p>
                                            <ul class="cmn-i">
                                                <li>
                                                    <a href="#" title="">
                                                        <i class="icon-thumbs_up"></i>
                                                    </a>
                                                    <span>680</span>
                                                </li>
                                                <li>
                                                    <a href="#" title="">
                                                        <i class="icon-thumbs_down"></i>
                                                    </a>
                                                    <span>21</span>
                                                </li>
                                            </ul>
                                            <a href="#" title="">View all 164 replies</a>
                                        </div>
                                        <!--coments end-->
                                    </div>
                                    <!--vcp_inf end-->
                                </li>
                                <li>
                                    <div class="vcp_inf">
                                        <div class="vc_hd">
                                            <img src="images/resources/th3.png" alt="">
                                        </div>
                                        <div class="coments">
                                            <h2>Doge
                                                <small class="posted_dt"> . 2 hours ago</small>
                                            </h2>
                                            <p>Depressive Alcoholics are my favorite superheroes </p>
                                            <ul class="cmn-i">
                                                <li>
                                                    <a href="#" title="">
                                                        <i class="icon-thumbs_up"></i>
                                                    </a>
                                                    <span>61</span>
                                                </li>
                                                <li>
                                                    <a href="#" title="">
                                                        <i class="icon-thumbs_down"></i>
                                                    </a>
                                                    <span>3</span>
                                                </li>
                                            </ul>
                                            <a href="#" title="">View all 26 replies</a>
                                        </div>
                                        <!--coments end-->
                                    </div>
                                    <!--vcp_inf end-->
                                </li>
                                <li>
                                    <div class="vcp_inf">
                                        <div class="vc_hd">
                                            <img src="images/resources/th4.png" alt="">
                                        </div>
                                        <div class="coments">
                                            <h2>Juan Lacanaria
                                                <small class="posted_dt"> . 12 hours ago</small>
                                            </h2>
                                            <p>Can you please say "winner winner , chicken dinner" </p>
                                            <ul class="cmn-i">
                                                <li>
                                                    <a href="#" title="">
                                                        <i class="icon-thumbs_up"></i>
                                                    </a>
                                                    <span>22</span>
                                                </li>
                                                <li>
                                                    <a href="#" title="">
                                                        <i class="icon-thumbs_down"></i>
                                                    </a>
                                                    <span></span>
                                                </li>
                                            </ul>
                                            <a href="#" title="">View all 9 replies</a>
                                        </div>
                                        <!--coments end-->
                                    </div>
                                    <!--vcp_inf end-->
                                </li>
                                <li>
                                    <div class="vcp_inf">
                                        <div class="vc_hd">
                                            <img src="images/resources/th5.png" alt="">
                                        </div>
                                        <div class="coments">
                                            <h2>Comander Lucky
                                                <small class="posted_dt"> . 2 weeks ago</small>
                                            </h2>
                                            <p>It looked like electro shuffle was most synced</p>
                                            <ul class="cmn-i">
                                                <li>
                                                    <a href="#" title="">
                                                        <i class="icon-thumbs_up"></i>
                                                    </a>
                                                    <span>37</span>
                                                </li>
                                                <li>
                                                    <a href="#" title="">
                                                        <i class="icon-thumbs_down"></i>
                                                    </a>
                                                    <span>3</span>
                                                </li>
                                            </ul>
                                            <a href="#" title="">View all 12 replies</a>
                                        </div>
                                        <!--coments end-->
                                    </div>
                                    <!--vcp_inf end-->
                                </li>
                                <li>
                                    <div class="vcp_inf">
                                        <div class="vc_hd">
                                            <img src="images/resources/th1.png" alt="">
                                        </div>
                                        <div class="coments">
                                            <h2>Menji
                                                <small class="posted_dt"> . 1 week ago</small>
                                            </h2>
                                            <p>The floss, fresh, flapper, ride the pony were all in sync if you ask
                                                me plus if they used the original music they would be copyrighted.
                                                Plus the original music made it worst for these dances. </p>
                                            <ul class="cmn-i">
                                                <li>
                                                    <a href="#" title="">
                                                        <i class="icon-thumbs_up"></i>
                                                    </a>
                                                    <span>147</span>
                                                </li>
                                                <li>
                                                    <a href="#" title="">
                                                        <i class="icon-thumbs_down"></i>
                                                    </a>
                                                    <span>8</span>
                                                </li>
                                            </ul>
                                            <a href="#" title="">View all 7 replies</a>
                                        </div>
                                        <!--coments end-->
                                    </div>
                                    <!--vcp_inf end-->
                                </li>
                                <li>
                                    <div class="vcp_inf">
                                        <div class="vc_hd">
                                            <img src="images/resources/th3.png" alt="">
                                        </div>
                                        <div class="coments">
                                            <h2>Storax Storm
                                                <small class="posted_dt"> . 11 hours ago</small>
                                            </h2>
                                            <p>Well Epic Games would have gotten Copyrighted if they used the
                                                original music but yea I see you</p>
                                            <ul class="cmn-i">
                                                <li>
                                                    <a href="#" title="">
                                                        <i class="icon-thumbs_up"></i>
                                                    </a>
                                                    <span>71</span>
                                                </li>
                                                <li>
                                                    <a href="#" title="">
                                                        <i class="icon-thumbs_down"></i>
                                                    </a>
                                                    <span>28</span>
                                                </li>
                                            </ul>
                                            <a href="#" title="">View all 21 replies</a>
                                        </div>
                                        <!--coments end-->
                                    </div>
                                    <!--vcp_inf end-->
                                </li>
                                <li>
                                    <div class="vcp_inf">
                                        <div class="vc_hd">
                                            <img src="images/resources/th2.png" alt="">
                                        </div>
                                        <div class="coments">
                                            <h2>Nick Jacobs
                                                <small class="posted_dt"> . 6 hours ago</small>
                                            </h2>
                                            <p>Electro shuffle best dance hands down </p>
                                            <ul class="cmn-i">
                                                <li>
                                                    <a href="#" title="">
                                                        <i class="icon-thumbs_up"></i>
                                                    </a>
                                                    <span>42</span>
                                                </li>
                                                <li>
                                                    <a href="#" title="">
                                                        <i class="icon-thumbs_down"></i>
                                                    </a>
                                                    <span></span>
                                                </li>
                                            </ul>
                                            <a href="#" title="">View all 32 replies</a>
                                        </div>
                                        <!--coments end-->
                                    </div>
                                    <!--vcp_inf end-->
                                </li>
                                <li>
                                    <div class="vcp_inf">
                                        <div class="vc_hd">
                                            <img src="images/resources/th4.png" alt="">
                                        </div>
                                        <div class="coments">
                                            <h2>Jumpman30
                                                <small class="posted_dt"> . 2 hours ago</small>
                                            </h2>
                                            <p>bruh okay the original fresh music is the best hands down, it looks
                                                classy. the music they put on the fresh in fort nite makes it worse
                                            </p>
                                            <ul class="cmn-i">
                                                <li>
                                                    <a href="#" title="">
                                                        <i class="icon-thumbs_up"></i>
                                                    </a>
                                                    <span>48</span>
                                                </li>
                                                <li>
                                                    <a href="#" title="">
                                                        <i class="icon-thumbs_down"></i>
                                                    </a>
                                                    <span>2</span>
                                                </li>
                                            </ul>
                                            <a href="#" title="">View all 3 replies</a>
                                        </div>
                                        <!--coments end-->
                                    </div>
                                    <!--vcp_inf end-->
                                </li>
                            </ul>
                            <!--user list end-->
                        </div>
                    </div>
                    <!--mn-vid-sc end--->
                </div>
                <!---col-lg-9 end-->
                <div class="col-lg-3">
                    <div class="sidebar">
                        <div class="vidz-prt">
                            <h2 class="sm-vidz">Similar Videos</h2>
                            <h3 class="aut-vid">
                                <span>Autoplay </span>
                                <label class="switch">
                                    <input type="checkbox">
                                    <b class="slider round"></b>
                                </label>
                            </h3>
                            <div class="clearfix"></div>
                        </div>
                        <!--vidz-prt end-->
                        <div class="videoo-list-ab">
                            <div class="videoo">
                                <div class="vid_thumbainl">
                                    <a href="single_video_page.html" title="">
                                        <img src="images/resources/vide1.png" alt="">
                                        <span class="vid-time">10:21</span>
                                        <span class="watch_later">
												<i class="icon-watch_later_fill"></i>
											</span>
                                    </a>
                                </div>
                                <!--vid_thumbnail end-->
                                <div class="video_info">
                                    <h3><a href="#" title="">Kingdom Come: Deliverance Funny Moments and Fails</a>
                                    </h3>
                                    <h4><a href="#" title="">newfox media</a> <span class="verify_ic"><i
                                            class="icon-tick"></i></span></h4>
                                    <span>686K views .<small class="posted_dt">1 week ago</small></span>
                                </div>
                            </div>
                            <!--videoo end-->
                            <div class="videoo">
                                <div class="vid_thumbainl">
                                    <a href="single_video_page.html" title="">
                                        <img src="images/resources/vide2.png" alt="">
                                        <span class="vid-time">13:49</span>
                                        <span class="watch_later">
												<i class="icon-watch_later_fill"></i>
											</span>
                                    </a>
                                </div>
                                <!--vid_thumbnail end-->
                                <div class="video_info">
                                    <h3><a href="#" title="">DR DISRESPECT - Before They Were Famous - Twitch
                                        Streamer</a></h3>
                                    <h4><a href="#" title="">newfox media</a> <span class="verify_ic"><i
                                            class="icon-tick"></i></span></h4>
                                    <span>686K views .<small class="posted_dt">1 week ago</small></span>
                                </div>
                            </div>
                            <!--videoo end-->
                            <div class="videoo">
                                <div class="vid_thumbainl">
                                    <a href="single_video_page.html" title="">
                                        <img src="images/resources/vide3.png" alt="">
                                        <span class="vid-time">2:54</span>
                                        <span class="watch_later">
												<i class="icon-watch_later_fill"></i>
											</span>
                                    </a>
                                </div>
                                <!--vid_thumbnail end-->
                                <div class="video_info">
                                    <h3><a href="#" title="">Top Perectly Timed Twitch Moments 2017 #7</a></h3>
                                    <h4><a href="#" title="">newfox media</a> <span class="verify_ic"><i
                                            class="icon-tick"></i></span></h4>
                                    <span>686K views .<small class="posted_dt">1 week ago</small></span>
                                </div>
                            </div>
                            <!--videoo end-->
                            <div class="ad-rw">
                                <img src="images/resources/ad-img.jpg" alt="">
                            </div>
                            <div class="videoo">
                                <div class="vid_thumbainl">
                                    <a href="single_video_page.html" title="">
                                        <img src="images/resources/vide4.png" alt="">
                                        <span class="vid-time">5:25</span>
                                        <span class="watch_later">
												<i class="icon-watch_later_fill"></i>
											</span>
                                    </a>
                                </div>
                                <!--vid_thumbnail end-->
                                <div class="video_info">
                                    <h3><a href="#" title="">Top 5 Amazing Bridge Block ever in PUBG</a></h3>
                                    <h4><a href="#" title="">newfox media</a> <span class="verify_ic"><i
                                            class="icon-tick"></i></span></h4>
                                    <span>686K views .<small class="posted_dt">1 week ago</small></span>
                                </div>
                            </div>
                            <!--videoo end-->
                            <div class="videoo">
                                <div class="vid_thumbainl">
                                    <a href="single_video_page.html" title="">
                                        <img src="images/resources/vide5.png" alt="">
                                        <span class="vid-time">4:01</span>
                                        <span class="watch_later">
												<i class="icon-watch_later_fill"></i>
											</span>
                                    </a>
                                </div>
                                <!--vid_thumbnail end-->
                                <div class="video_info">
                                    <h3><a href="#" title="">Trailer Park Boys Season 12 - Official Trailer</a></h3>
                                    <h4><a href="#" title="">newfox media</a> <span class="verify_ic"><i
                                            class="icon-tick"></i></span></h4>
                                    <span>686K views .<small class="posted_dt">1 week ago</small></span>
                                </div>
                            </div>
                            <!--videoo end-->
                            <div class="videoo">
                                <div class="vid_thumbainl">
                                    <a href="single_video_page.html" title="">
                                        <img src="images/resources/vide6.png" alt="">
                                        <span class="vid-time">6:20</span>
                                        <span class="watch_later">
												<i class="icon-watch_later_fill"></i>
											</span>
                                    </a>
                                </div>
                                <!--vid_thumbnail end-->
                                <div class="video_info">
                                    <h3><a href="#" title="">A day in the life of a Google software engineer</a>
                                    </h3>
                                    <h4><a href="#" title="">newfox media</a> <span class="verify_ic"><i
                                            class="icon-tick"></i></span></h4>
                                    <span>686K views .<small class="posted_dt">1 week ago</small></span>
                                </div>
                            </div>
                            <!--videoo end-->
                            <div class="videoo">
                                <div class="vid_thumbainl">
                                    <a href="single_video_page.html" title="">
                                        <img src="images/resources/vide7.png" alt="">
                                        <span class="vid-time">8:16</span>
                                        <span class="watch_later">
												<i class="icon-watch_later_fill"></i>
											</span>
                                    </a>
                                </div>
                                <!--vid_thumbnail end-->
                                <div class="video_info">
                                    <h3><a href="#" title="">Avengers: Infinity War - Gym Workout</a></h3>
                                    <h4><a href="#" title="">newfox media</a> <span class="verify_ic"><i
                                            class="icon-tick"></i></span></h4>
                                    <span>686K views .<small class="posted_dt">1 week ago</small></span>
                                </div>
                            </div>
                            <!--videoo end-->
                            <div class="videoo">
                                <div class="vid_thumbainl">
                                    <a href="single_video_page.html" title="">
                                        <img src="images/resources/vide8.png" alt="">
                                        <span class="vid-time">29:32</span>
                                        <span class="watch_later">
												<i class="icon-watch_later_fill"></i>
											</span>
                                    </a>
                                </div>
                                <!--vid_thumbnail end-->
                                <div class="video_info">
                                    <h3><a href="#" title="">How the Universe Works - The Milky Way Galaxy -
                                        Space</a></h3>
                                    <h4><a href="#" title="">newfox media</a> <span class="verify_ic"><i
                                            class="icon-tick"></i></span></h4>
                                    <span>686K views .<small class="posted_dt">1 week ago</small></span>
                                </div>
                            </div>
                            <!--videoo end-->
                        </div>
                        <!--videoo-list-ab end-->
                    </div>
                    <!--side-bar end-->
                </div>
            </div>
        </div>
    </section>
    <!--mn-sec end-->

    <section class="more_items_sec text-center">
        <div class="container">
            <a href="#" title="">
                <svg width="19" height="24" viewBox="0 0 19 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path
                            d="M18.1618 24.0001H0.838235C0.374412 24.0001 0 23.6261 0 23.1628V5.86052C0 5.39727 0.374412 5.02332 0.838235 5.02332H18.1618C18.6256 5.02332 19 5.39727 19 5.86052V23.1628C19 23.6261 18.6256 24.0001 18.1618 24.0001ZM1.67647 22.3256H17.3235V6.69773H1.67647V22.3256Z"
                            fill="#9494A0"/>
                    <g opacity="0.25">
                        <path opacity="0.25"
                              d="M13.1324 4.18605C12.6685 4.18605 12.2941 3.81209 12.2941 3.34884V1.67442H6.70589V3.34884C6.70589 3.81209 6.33148 4.18605 5.86765 4.18605C5.40383 4.18605 5.02942 3.81209 5.02942 3.34884V0.83721C5.02942 0.373954 5.40383 0 5.86765 0H13.1324C13.5962 0 13.9706 0.373954 13.9706 0.83721V3.34884C13.9706 3.81209 13.5962 4.18605 13.1324 4.18605Z"
                              fill="#9494A0"/>
                    </g>
                    <path
                            d="M9.50001 19.3479C9.28487 19.3479 9.06972 19.267 8.90766 19.1024L5.92634 16.1275C5.59942 15.801 5.59942 15.2707 5.92634 14.9442C6.25325 14.6177 6.78413 14.6177 7.11104 14.9442L9.50001 17.3275L11.8862 14.9442C12.2131 14.6177 12.744 14.6177 13.0709 14.9442C13.3978 15.2707 13.3978 15.801 13.0709 16.1275L10.0924 19.1024C9.93031 19.267 9.71516 19.3479 9.50001 19.3479Z"
                            fill="#9494A0"/>
                    <path
                            d="M9.49999 18.4186C9.03617 18.4186 8.66176 18.0447 8.66176 17.5814V10.3256C8.66176 9.86236 9.03617 9.4884 9.49999 9.4884C9.96382 9.4884 10.3382 9.86236 10.3382 10.3256V17.5814C10.3382 18.0447 9.96382 18.4186 9.49999 18.4186Z"
                            fill="#9494A0"/>
                    <g opacity="0.5">
                        <path opacity="0.5"
                              d="M15.6471 6.69764C15.1832 6.69764 14.8088 6.32369 14.8088 5.86043V4.18601H4.19118V5.86043C4.19118 6.32369 3.81677 6.69764 3.35294 6.69764C2.88912 6.69764 2.51471 6.32369 2.51471 5.86043V3.34881C2.51471 2.88555 2.88912 2.5116 3.35294 2.5116H15.6471C16.1109 2.5116 16.4853 2.88555 16.4853 3.34881V5.86043C16.4853 6.32369 16.1109 6.69764 15.6471 6.69764Z"
                              fill="#9494A0"/>
                    </g>
                </svg>
            </a>
        </div>
    </section>
    <!--more_items_sec end-->

</div>
<!--wrapper end-->


<script src="js/jquery.min.js"></script>
<script src="js/popper.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.mCustomScrollbar.js"></script>
<script src="js/video.js"></script>
<script src="js/script.js"></script>
<script src="js/vue.js"></script>
<script src="js/header.js"></script>
<script src="js/superVideo.js"></script>
<script src="js/webs.js"></script>
<script src="js/axios.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data() {
            return {
                headImg: '',
                comment: {
                    aid: '',//detail的主键
                    parentId: '',//父id，回复的评论
                    text: '',//评论内容
                },
                user: null,
                aid: '',
                videoPage: {}
            }
        },
        create() {
            this.getUserInfo();
            this.getVideoPage();
        },
        methods: {
            addComment() {
                axios.post("http://localhost:11001/api/comment/add", this.comment).then(res => {
                    if (res.data.flag) {
                        alert(res.data.msg);
                    }
                })
            },
            getUserInfo() {
                if (JSON.parse(localStorage.getItem("user"))) {
                    this.user = JSON.parse(localStorage.getItem("user"))
                }
                console.log(this.user)
            },
            getVideoPage() {
                axios.get("http://localhost:11001/api/video/findcid/" + this.aid).then(res => {
                    if (res.data.flag) {
                        this.videoInfo = res.data.data;
                    }
                })
            }
        }

    })
</script>
<script>
    var nextControl = new Super.NextControl() // 实例化“下一个”按钮控件
    var Dbspeen = new Super.DbspeenControl() // 倍速控件
    var BarrageControl = new Super.BarrageControl() // 弹幕控件
    var fullScreenControl = new Super.FullScreenControl() // 实例化“全屏”控件
    var video = new Super.Svideo('videoContainer', {
        source: new Super.VideoSource({ // 引入视频资源
            src: 'https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_AnimatedShot_Winston_Recall.mp4'
        }),
        leftControls: [nextControl], // 控件栏左槽插入控件
        rightControls: [Dbspeen, fullScreenControl], // 控件栏右槽插入控件
        centerControls: [BarrageControl] // 弹幕控件插入中间插槽
    })
    video.addEventListener('change', function (event) { // 监听video各属性变化
        // console.log(video.getCurrentTime( ))
        //  console.log(event)
    })
    nextControl.addEventListener('click', function (event) { // 监听“下一个”按钮控件点击事件
        alert('click next menu !!!')
    })
    fullScreenControl.addEventListener('fullscreen', function (event) { // 监听进入全屏
        console.log('is fullscreen !!!')
    })
    fullScreenControl.addEventListener('cancelfullscreen', function (event) { // 监听退出全屏
        console.log('cancel fullscreen !!!')
    })
    video.addEventListener('fullscreen', function (event) {
        console.log('is fullscreen !!!')
    })
    $(document).ready(function () {
        var sendtimes = [];
        var msgs = [];
        $.get("http://localhost:11001/api/danmaku", function (res) {
            $.each(res.data, function (i, val) {
                msgs.push(val.danmu);
                sendtimes.push(parseFloat(val.sendtime))
            })
            console.log(res)
            console.log(sendtimes)
            console.log(msgs)
        })
        var inputBox = $(".sv-barrage-input");
        var barrageBox = $("#barrage-box");
        var sendBtn = $(".sv-barrage-button");
        sendBtn.click(function () {
            console.log(typeof (video.getCurrentTime()))
            $.ajax({
                url: "http://localhost:11001/api/danmaku/add",
                type: "POST",
                data: JSON.stringify({
                    "danmu": BarrageControl.option.value,
                    "sendtime": video.getCurrentTime().toFixed(2)
                }),
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                success: function () {
                    //
                }
            });
            websocket.send(BarrageControl.option.value);       //发送输入框的文本信息
            //发送后删除输入框消息
            inputBox.val("");
        })
        video.addEventListener('change', function (event) {// 监听video各属性变化
            // setTimeout(1000);
            $.each(sendtimes, function (i, val) {
                if (video.getCurrentTime().toFixed(2) - 0.2 <= val && val <= video.getCurrentTime().toFixed(2) + 2) {
                    console.log("=========")
                    video.addBarrage(msgs[i]);
                }
            })
        })
        websocket.onmessage = function (event) {
            var msg = event.data
            video.addBarrage(msg)
        }
    })
</script>
</body>

</html>
